<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<jsp:include page="/WEB-INF/pages/admin/public/meta.jsp"></jsp:include>
<title>服务类型列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 产品管理 <span class="c-gray en">&gt;</span>服务类型列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
	<div class="cl pd-5 bg-1 bk-gray mt-20">
		<span class="l">
			<a href="javascript:;" onclick="addStyle()" class="btn btn-success radius"><i class="Hui-iconfont">&#xe6e2;</i> 添加服务类型</a>
		</span>
		<span class="r">共有数据：<strong>${count }</strong> 条</span>
	</div>
	<div class="mt-20">
		<table class="table table-border table-bordered table-bg table-hover table-sort">
 			<thead>
				<tr class="text-c">
					<th width="450">类型名称</th>
					<th width="60">状态</th>
					<th width="150">操作</th>
				</tr>
 			</thead>
 			<tbody>
				<c:forEach var="style" items="${styleList }" >
	 				<tr class="text-c" id="styledata${style.id }">
						<td width="120">${style.name }</td>
						<td class="td-status">
							<c:if test="${style.status eq '1' }">
								<span class="label label-success radius">已上线</span>
							</c:if>
							<c:if test="${style.status eq '2' }">
								<span class="label label-default radius">未上线</span>
							</c:if>
							<c:if test="${style.status ne '1' && style.status ne '2' }">
								<span class="label label-danger radius">异常</span>
							</c:if>
						</td>
						<td class="td-manage">
							<c:if test="${style.status eq '1' }">
								<a style="text-decoration:none" onClick="updataStyleStatus(this,${style.id},2)" href="javascript:;" title="下线" class="ml-5" ><i class="Hui-iconfont">&#xe6de;</i></a>
							</c:if>
							<c:if test="${style.status ne '1' }">
								<a style="text-decoration:none" onClick="updataStyleStatus(this,${style.id},1)" href="javascript:;" title="上线" class="ml-5" ><i class="Hui-iconfont">&#xe6dc;</i></a>
								<a style="text-decoration:none" onClick="showEditPage(${style.id})" href="javascript:;" title="编辑" class="ml-5" ><i class="Hui-iconfont">&#xe60c;</i></a>
								<a style="text-decoration:none" onClick="deleteStyle(${style.id})" href="javascript:;" title="删除" class="ml-5" ><i class="Hui-iconfont">&#xe609;</i></a>
							</c:if>
						</td>
	 				</tr>
				</c:forEach>
 			</tbody>
		</table>
	</div>
</div>

<!--_footer 作为公共模版分离出去-->
<jsp:include page="/WEB-INF/pages/admin/public/footer.jsp"></jsp:include>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/xinda/WebRoot/admin/lib/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="admin/lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="admin/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
$('.table-sort').dataTable({
	"aaSorting": [[ 0, "desc" ]],//默认第几个排序
	"bStateSave": true,//状态保存
	"aoColumnDefs": [
	//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
	{"orderable":false,"aTargets":[2]}// 制定列不参与排序
	]
});

function updataStyleStatus(obj,id,status) {
	layer.confirm( status==1 ? '确认上线码？' : '确认下线码？',function(index){
		$.ajax({
		    url: "styleUpdateOfStatus.action",
		    type: "POST",
		    data: {
		          "id" : id,
		          "status" : status
		    },
		    success: function(data){
		    	if(status==1){
		    		$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已上线</span>');
		    		$(obj).parents("td").html('<a style="text-decoration:none" onClick="updataStyleStatus(this,' + id + ',2)" href="javascript:;" title="下线" class="ml-5" ><i class="Hui-iconfont">&#xe6de;</i></a>');
		    	}else{
		    		$(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">未上线</span>');
		    		$(obj).parents("td").html(
		    			'<a style="text-decoration:none" onClick="updataStyleStatus(this,' + id + ',1)" href="javascript:;" title="上线" class="ml-5" ><i class="Hui-iconfont">&#xe6dc;</i></a>' +
						'<a style="text-decoration:none" onClick="showEditPage(' + id + ')" href="javascript:;" title="编辑" class="ml-5" ><i class="Hui-iconfont">&#xe60c;</i></a>' +
						'<a style="text-decoration:none" onClick="deleteStyle(' + id + ')" href="javascript:;" title="删除" class="ml-5" ><i class="Hui-iconfont">&#xe609;</i></a>'
					);
		    	}
				layer.msg( status==1 ? '上线成功!' : '下线成功',{icon: 1,time:2000});
		    },
		    error: function(data){
		        layer.msg(status==1 ? '上线失败!' : '下线失败',{icon: 5,time:2000});
		    }
		});
	});
}

function showEditPage(id){
	var index = layer.open({
		type: 2,
		title: "编辑类型",
		content: "showEditStylePage.action?id="+id
	});
	layer.full(index);
}
function addStyle(){
	var index = layer.open({
		type: 2,
		title: "添加类型",
		content: "showAddStylePage.action"
	});
	layer.full(index);
}
function deleteStyle(id){
	layer.confirm('确认删除码？',function(index){
		$.ajax({
		    url: "deleteStyle.action",
		    type: "POST",
		    data: {
		          "id" : id,
		    },
		    success: function(data){
				layer.msg('已删除!',{icon: 1,time:2000});
				window.location.reload();
		    },
		    error: function(data){
		        layer.msg('删除失败!',{icon: 5,time:2000});
		    }
		});
	});
}
</script>
</body>
</html>